<script>
export default {
  name: 'questionStructure',
  data() {
    return {
      courseImg:this.$route.query.courseImg,
      courseName:this.$route.query.courseName,
      courseId: this.$route.params.courseId,
    }
  },
  methods: {
    ToMemoryPage(){
      const courseId = this.$route.params.courseId;
      this.$router.push(`/memory/${courseId}`);
    },
  },
  mounted() {

  }
};
</script>

<template>
  <div class="text-container">
    <el-card>
      <h1 class="exam-title">{{ courseName }}</h1>
      <div class="exam-content">
        <div class="question-structure">
          <h3>题目构成</h3>
          <p>
            单选题 <span class="highlight">12题</span> &nbsp;&nbsp;
            判断题 <span class="highlight">38题</span>
          </p>
        </div>
      </div>

      <div class="start-exam">
        <el-button type="primary" size="medium" @click="ToMemoryPage()">开始背题</el-button>
      </div>
    </el-card>
  </div>
</template>

<style scoped>
.text-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f5f5f5;
}

.el-card {
  padding: 20px;
  height: 50%;
  width: 50%;
  background-color: #ffffff;
  text-align: center;
}

.exam-title {
  font-size: 24px;
  color: #3c8dbc;
  margin-bottom: 50px;
}

.exam-content {
  text-align: left;
}

.question-structure {
  margin-top: 20px;
}

.question-structure h3 {
  font-size: 18px;
  margin-bottom: 10px;
}
.question-structure p {
  margin-top: 15px;
}
.highlight {
  color: #409EFF;
}

.start-exam {
  position: relative;
  bottom: -150px;
  text-align: center;
}
</style>
